<template>
  <div class="content">
    <Tabs :value="list[0].name" @on-click="tabClick" class="select">
      <TabPane
        v-for="(item, index) in list"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
      </TabPane>
    </Tabs>
    <div class="circleMain" v-if="current == 1">
      <div
        v-for="(item, index) in allCircleList"
        :key="index"
        class="circleItem"
      >
        <div class="circleInfo">
          <img :src="item.img" class="circle-img" alt="" />
          <div class="circlePeople">
            <div>{{ item.name }}</div>
            <div>{{ item.people }}成员</div>
          </div>
        </div>
        <div class="join">{{ item.status == 1 ? "√已加入" : "加入" }}</div>
      </div>
    </div>
    <div class="circleMain" v-if="current == 2">
      <div
        v-for="(item, index) in myCircleList"
        :key="index"
        class="circleItem"
      >
        <div class="circleInfo">
          <img :src="item.img" class="circle-img" alt="" />
          <div class="circlePeople">
            <div>{{ item.name }}</div>
            <div>{{ item.people }}成员</div>
          </div>
        </div>
        <div class="join">{{ item.status == 1 ? "√已加入" : "加入" }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          label: "全部",
          name: "1",
        },
        {
          label: "我加入的",
          name: "2",
        },
      ],
      allCircleList: [
        {
          img: require("@/assets/header.jpg"),
          name: "跑步爱好着",
          people: 2423,
          status: 1,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "万能求助圈",
          people: 2423,
          status: 1,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "蒲公英的约定",
          people: 2423,
          status: 0,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "原神朋友圈",
          people: 2423,
          status: 1,
        },
      ],
      myCircleList: [
        {
          img: require("@/assets/header.jpg"),
          name: "跑步爱好着",
          people: 2423,
          status: 1,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "万能求助圈",
          people: 2423,
          status: 1,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "万能求助圈",
          people: 2423,
          status: 1,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "万能求助圈",
          people: 2423,
          status: 1,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "万能求助圈",
          people: 2423,
          status: 1,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "蒲公英的约定",
          people: 2423,
          status: 0,
        },
        {
          img: require("@/assets/header.jpg"),
          name: "原神朋友圈",
          people: 2423,
          status: 1,
        },
      ],
      current: 1,
    };
  },
  methods: {
    tabClick(v) {
      this.current = v;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .circleMain {
    background-color: #fff;
    padding: 5px;
    .circleItem {
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #eee;
      justify-content: space-between;
      .circleInfo {
        display: flex;
        .circle-img {
          width: 50px;
          height: 50px;
        }
        .circlePeople {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
      }
      .join {
        width: 60px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 10px;
        color: #f00;
      }
    }
  }
}
::v-deep .ivu-tabs-bar {
  background-color: #fff;
  padding: 10px;
}
::v-deep .ivu-tabs-bar {
  border: none;
}
</style>
